<!-- 悬浮窗 -->
<template>
    <div class="suspension" :style="boxStyle">
        <ul
            :class="[(element.eles.customFeature.mode === 0 ? 'mode1-ul' : 'mode2-ul')]"
            class="suspension-ul"
        >
            <template v-for="(item, index) in element.eles.content" :key="index">
                <li :style="getItemBoxStyle(index)">
                    <template v-if="element.eles.customFeature.openIcon">
                        <div
                            :style="{
                                width: `${element.eles.customFeature['img-size']}px`,
                                height: `${element.eles.customFeature['img-size']}px`,
                                borderRadius: element.eles.customFeature['border-radius'],
                                backgroundColor: element.eles.customFeature.lineBackgroundColor,
                                backgroundImage: element.eles.customFeature.lineBackgroundImage
                            }"
                            class="suspension-item list-item diy"
                        >
                            <el-image
                                :src="item.pic"
                                fit="fill"
                                :style="{
                                    width: `${element.eles.customFeature['img-size']}px`,
                                    height: `${element.eles.customFeature['img-size']}px`,
                                }"
                            >
                                <template #error>
                                    <div class="picture-image-slot no-image"></div>
                                </template>
                            </el-image>
                        </div>
                    </template>
                    <template v-if="element.eles.customFeature.openText">
                        <div>
                            <span
                                :style="{
                                    color: element.eles.style.color,
                                    fontSize: element.eles.style['font-size'],
                                    fontWeight: element.eles.style['font-weight'],
                                    fontStyle: element.eles.style['font-style'],
                                    textDecoration: element.eles.style['text-decoration']
                                }"
                            >
                                {{ item.title }}
                            </span>
                        </div>
                    </template>
                </li>
            </template>
        </ul>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'WidgetSuspension',
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const { element } = toRefs(props)

        const boxStyle = computed(() => {
            const style = element.value.eles.style || {}
            const customFeature = element.value.eles.customFeature || {}
            return {
                fontSize: '0px',
                overflow: 'auto',
                opacity: style.opacity,
                backgroundColor: style['background-color'],
                backgroundImage: style['background-image'],
                maxWidth: customFeature.width || '100%',
                width: customFeature.width,
                height: customFeature.height
            }
        })

        const getItemBoxStyle = index => {
            const customFeature = element.value.eles.customFeature || {}
            if (customFeature.mode === 0) {
                return {
                    marginBottom: (index === element.value.eles.content.length - 1) ? '0px' : `${customFeature.margin}px`
                }
            } else if (customFeature.mode === 1) {
                return {
                    display: 'inline-block',
                    marginRight: (index === element.value.eles.content.length - 1) ? '0px' : `${customFeature.margin}px`
                }
            }
            return {}
        }
        
        return {
            element,
            boxStyle,
            getItemBoxStyle
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-suspension.less';
</style>